const app = getApp()
var width = 0;
var height = 0;
var hLineNum = 0;
var vLineNum = 0;
var x_start = 25;
var lineCtx = null;
var grid_width = 5;
var timeId = null;
var interval = null;
var waveInit = [-131,228,-73,-28,-277,427,-517,428,-495,559,-270,343,-401,762,-1064,1026,-802,929,-584,259,-235,269,-286]
Page({
  data: {
    timer: null,
    phase: 0,
  },
  onReady() {
    this.drawLine()
  },
  onUnload() {
  },
  // startWave() {
  //   const timer = setInterval(() => {
  //     this.setData({
  //       phase: this.data.phase + 0.1
  //     }, () => {
  //       this.drawBreathWave();
  //     });
  //   }, 16);
  //   this.setData({ timer });
  // },
  // drawBreathWave() {
  //   const ctx = wx.createCanvasContext('breathWave', this);
  //   const width = wx.getWindowInfo().windowWidth;
  //   const height = 300;
  //   const amplitude = 40; // 波幅
  //   const frequency = 2;  // 波形周期数
  //   const phase = this.data.phase;
  //   ctx.setStrokeStyle('#1976d2');
  //   ctx.setLineWidth(2);
  //   ctx.beginPath();
  //   for (let x = 0; x <= width; x++) {
  //     // y = A * sin(ωx + φ) + k
  //     const y = amplitude * Math.sin((frequency * 2 * Math.PI * x) / width + phase) + height / 2;
  //     if (x === 0) {
  //       ctx.moveTo(x, y);
  //     } else {
  //       ctx.lineTo(x, y);
  //     }
  //   }
  //   ctx.stroke();
  //   ctx.draw();
  // },
  initHrCurve(res) {
    console.log(res, 'resssssssssssssssssssssssss')
    let hrVal = '--';
    let brVal = '--';
    let wave = waveInit;
    let wave2 = [];
    let _width = wx.getWindowInfo().screenWidth;
    let clheight = wx.getWindowInfo().screenHeight;
    let yData = Math.floor(clheight / 100);
    let yData2 = Math.floor(clheight / 300);
    let itemHeight = Number(((_width - 42) / 2).toFixed(2))
    let itemHeight2 = Number(((_width - 42) / 5).toFixed(2))
    let pt = (itemHeight - itemHeight2) / 2;
    let hrMin = Number(50) || 0
    let hrMax = Number(120) || 0
    let rrMin = Number(10) || 0
    let rrMax = Number(30) || 0


    width = wx.getWindowInfo().screenWidth
    height = res[0].height

    console.log(width)
    console.log(height)
    const canvas = res[0].node
    lineCtx = canvas.getContext('2d')
    const dpr = wx.getWindowInfo().pixelRatio;
    canvas.width = clheight
    canvas.height = itemHeight
    // canvas.width = width * dpr;
    // canvas.height = height * dpr;
    let ctx = canvas.getContext('2d');
    // aliasing(canvas, ctx)
    ctx.strokeStyle = "#17D292";
    ctx.strokeWidth = 2;
    ctx.lineWidth = 1;
    var x = 0
    let i = 0
    let beginPoint = { x: 0, y: itemHeight / 2 };
    let val = 10
    interval = setInterval(() => {
      ctx.clearRect(x * yData + val, 0, yData + 10, itemHeight);
      x = x + 1
      if (wave.length == 0) {
        beginPoint = { x: x * yData, y: itemHeight / 2 }
      }
      let num = wave.length > 0 ? wave[i] : itemHeight / 2
      if (wave.length > 1) {
        let controlPoint = { x: x * yData, y: num };
        let endPoint = {
          x: (x * yData + (x + 1) * yData) / 2,
          y: (num + wave[i + 1]) / 2,
        }
        val = 10
        // onDraw(ctx, beginPoint, controlPoint, endPoint);
        ctx.beginPath();
        ctx.moveTo(beginPoint.x, beginPoint.y);
        ctx.quadraticCurveTo(controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);
        ctx.stroke();
        ctx.closePath();
        beginPoint = endPoint;
      } else if (wave.length == 1) {
        ctx.beginPath()
        ctx.moveTo(beginPoint.x, beginPoint.y);
        ctx.lineTo(x * yData, num)
        ctx.stroke();
        beginPoint = { x: x * yData, y: num }
      } else {
        ctx.lineTo(x * yData, num)
        ctx.stroke();
      }
      wave.shift()
      if (x >= Math.floor(clheight / yData)) {
        x = 0
        beginPoint = { x: 0, y: itemHeight / 2 };
        val = 0
        ctx.beginPath();
      }
    }, 120);
    ctx.stroke();
    ctx.closePath();
  },
  drawLine() {
    // let canvas = document.getElementById("line")
    const query = wx.createSelectorQuery();
      query.select('#myCanvas')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        console.log(res)
        this.initHrCurve(res)
        
      })
    
  }
});